<template>
	<div class="p_Login_zuzheinput">
		<span class="p_Login_input1">
       		<input type="text" placeholder="手机号" v-model="arr"/>
       	</span>
		<br />
		<span class="p_Login_input2">
       		<input type="text" placeholder="请输入短信验证码" v-model="brr"/>
       	</span>
		<button class="p_Login_yanzheng" @click="getyanzhengma()">获取验证码</button>
		<span class="p_Login_number1" ref="ss">验证码是: <em></em></span>

		<a id="denglu" @click="getdenglu()"><button class="p_Login_denglu">登录</button></a>
		<p class="p_Login_p">未注册手机登录成功将自动注册，且代表您同意以下协议 </p>
		<div class="p_Login_xieyi">
			<a href="#">《国美平台服务协议》</a>
			<a href="#">《国美平台隐私政策》</a>
			<a href="#">《美付宝服务协议》</a>
		</div>
	</div>
</template>

<script>

	export default {
		name: "zhanghao",
		data() {
			return {
				arr:"",
				brr:"",
				href:'#/usergeren'
			}
		},
		methods: {
			
			getyanzhengma: function() {
				var arr1 = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
				if(!arr1.test(this.arr)) {
					console.log("请输入正确的手机号");
				} else {
					$(".p_Login_number1").css("display", "block");
				}
			},
			
			getdenglu: function() {
				var _this = this;
				this.axios.get('http://localhost:3000/router/select', {
							params: {
								phone: _this.arr,
								condition: _this.sql.user.select
							}
					}).then(function(res) {
							if(res.data.params!=""&&_this.brr ==_this.$refs.ss) {
								
								//缓存数据
								var obj = {
									phone:_this.arr,
									psw: 123
								}
								var arry = [];
								arry.push(obj);
								localStorage.setItem('obj',JSON.stringify(arry));

								window.location.href = _this.href;
							}else{
								console.log('验证码输入错误或者 请先去注册')
							}
						})
			
			}
		},
		mounted() {
			var _this = this;
			$(function() {
				var r = ranmun(0, 9);
				var g = ranmun(0, 9);
				var c = ranmun(0, 9);
				var d = ranmun(0, 9);
				var str = r + " " + g + " " + c + " " + d;
				_this.$refs.ss = str ;
				$(".p_Login_number1 em").html(str);
				function ranmun(a, b) {
					return Math.floor(Math.random() * (b - a + 1) - a);
				}
			})
		}
	}
</script>

<style scoped>
	.p_Login_zuzheinput {
		width: 80%;
		margin: 5% auto;
	}
	
	.p_Login_input1 {
		display: block;
		width: 100%;
		padding-bottom: 3%;
		border-bottom: 1px solid #999;
		background: url(../../../assets/login/手机.png)no-repeat 0 5px;
	}
	
	.p_Login_input1 input {
		margin-left: 20px;
		border: none;
		outline: none;
		width: 92%;
		height: 20px;
		color: #999;
		background: url(../../../assets/login/叉掉.png)no-repeat 100% 2px;
	}
	
	.p_Login_input2 {
		background: url(../../../assets/login/锁.png)no-repeat 0 5px;
		display: inline-block;
		width: 50%;
		padding-bottom: 3%;
		border-bottom: 1px solid #999;
	}
	
	.p_Login_input2 input {
		margin-left: 20px;
		border: none;
		outline: none;
		width: 100%;
		height: 20px;
		color: #999;
		background: url(../../../assets/login/叉掉.png)no-repeat 90% 2px;
	}
	
	.p_Login_yanzheng {
		width: 40%;
		height: 30px;
		background-color: white;
		margin-left: 7%;
		border-radius: 20px;
		vertical-align: bottom;
		border: none;
		outline: none;
		border: 1px solid rgb(255, 129, 173);
		color: rgb(255, 129, 173);
	}
	
	.p_Login_number1 {
		height: 30px;
		line-height: 3rem;
		display: block;
		margin-top: 5%;
		display: none;
		color: #FF9A19;
		font-size: 2rem;
	}
	
	.p_Login_denglu {
		margin-top: 10%;
		width: 100%;
		height: 40px;
		background-color: rgb(255, 129, 173);
		border-radius: 20px;
		border: none;
		outline: none;
		color: white;
	}
	
	.p_Login_p {
		font-size: 0.65rem;
		margin-top: 5%;
		color: #999;
	}
	
	.p_Login_xieyi a {
		text-decoration: none;
		font-size: 0.65rem;
		margin: 1%;
		color: rgb(110, 190, 231);
	}
</style>